<template> 
  <div class="common-page stack-level-view">
    <div class="describe">
      <p>
      </p>
    </div>

    <div class="case-wrap">
      <h4 class="title">-webkit-box-reflect</h4>
      <div class="sample ">
        <div class="model a">
        </div>
      </div>
      <p class="desc">
        使用了  <strong>-webkit-box-reflect: below</strong> 属性 生成倒影<br />
        但 目前 -webkit-box-reflect 仅在 webkit 内核浏览器下兼容
      </p>
    </div>

    <div class="case-wrap">
      <h4 class="title">使用伪类after 结合 背景inherit 实现</h4>
      <div class="sample ">
        <div class="model b">
        </div>
      </div>
      <p class="desc">
        在伪类中 使用了  <strong>background-image：inherit</strong> 继承父节点的背景<br />
        并 以 left bottom 为 transform-origin 旋转 180deg (rotateX)
      </p>
    </div>

    <p>https://github.com/chokcoco/iCSS/issues/1</p>
  </div> 
</template>

<script>
export default {
  name: 'StackLevelView',
  props: {
  },
  data () {
    return {

    }
  },
  computed: {
  },
  
  watch: {
  },
  created() {

  },
  mounted() {

  },
  methods: {
  }
}
</script>


<style scoped lang="stylus">
 
.stack-level-view
  .describe
    padding 4px
    p
      line-height 1.8
      font-size 16px
      margin-bottom 3px
  .case-wrap
    padding 10px
    .title
      font-size 18px
      font-weight bold
    .sample
      padding 5px
      .model
        position relative
        width: 150px
        height 150px
        margin-bottom 150px
    .desc
      line-height 1.4
      font-size 14px
      color blue
      strong
        font-weight bold
        color red;

.a
  background no-repeat
  background-position center center
  background-size contain
  background-image url('../../../../assets/img/jizhi.png')
  -webkit-box-reflect: below;
.b
  background no-repeat
  background-position center center
  background-size contain
  background-image url('../../../../assets/img/jizhi.png')
  &:after
    content ''
    position absolute
    width 100%
    height 100%
    background no-repeat
    background-size contain
    background-image inherit
    transform-origin left bottom
    transform rotateX(180deg)

</style>



